<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-03-28 14:38:51
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-03-28 14:40:21
 * @Description:
 *
-->

<template>
  <MyContainer class="container">
    <MyHeader class="header">
      <p style="margin-right: 10px" size="medium">云服务商</p>
      <el-select v-model="value01" @change="CloudAccountNameChanged" placeholder="请选择">
        <el-option
          v-for="item in clusterAll"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <p style="margin-left: 50px;margin-right: 10px" size="medium">云账号</p>
      <el-select v-model="value02" placeholder="请选择">
        <template v-if="value01 == '阿里云'">
          <el-option
            v-for="item in PublicCloudAccountName.data.data"
            :key="item.cpId"
            :label="item.cloudAccountName"
            :value="item.cloudAccountName">
          </el-option>
        </template>
        <template v-if="value01 == 'Openstack'">
          <el-option
            v-for="item in PrivateCloudAccountName.data.data"
            :key="item.cpId"
            :label="item.cloudAccountName"
            :value="item.cloudAccountName">
          </el-option>
        </template>
      </el-select>
      <p style="margin-left: 30px;margin-right: 10px;width: 40px" size="medium">时间</p>
      <el-select v-model="value03" placeholder="请选择">
        <el-option
          v-for="item in options01"
          :key="item.value"
          :label="item.label"
          :value="item.label" />
      </el-select>
      <el-button
        style="margin-left: 10px"
        size="medium"
        type="primary"
        @click="getList"
      >查询</el-button>
    </MyHeader>
    <MyMain class="main">
      <el-table
        :data="list01"
        class="common-table"
        stripe
        header-cell-class-name="listHeaderCell"
        :header-cell-style="{ color: '#696969' }"
        style="width:25%;height:300px;float:left;">
        <el-table-column prop="key" label="TOP5-CPU使用率(实时)(%)" width="250" />
        <el-table-column prop="val"  width="80">
          <!-- <template slot-scope="list01">
            {{ list01.val }}{{ list01.unit }}
          </template> -->
        </el-table-column>
      </el-table>
      <el-table
        :data="list02"
        class="common-table"
        stripe
        header-cell-class-name="listHeaderCell"
        :header-cell-style="{ color: '#696969' }" 
        style="width:25%;height:300px;float:left;">
        <el-table-column prop="key" label="TOP5-内存使用率(实时)(%)" width="250" />
        <el-table-column prop="val" width="80" />
      </el-table>
      <el-table
        :data="list03"
        class="common-table"
        stripe
        header-cell-class-name="listHeaderCell"
        :header-cell-style="{ color: '#696969' }"
        style="width:25%;height:300px;float:left;">
        <el-table-column prop="key" label="TOP5-网络流入速率(实时)(KB/S)" width="260" />
        <el-table-column prop="val" width="80" />
      </el-table>
      <el-table
        :data="list04"
        class="common-table"
        stripe
        header-cell-class-name="listHeaderCell"
        :header-cell-style="{ color: '#696969' }"
        style="width:25%;height:300px;">
        <el-table-column prop="key" label="TOP5-网络流出速率(实时)(KB/S)" width="260" />
        <el-table-column prop="val" width="80" />
      </el-table>
      <div id="myChart01" style="width:23%;height:300px;float:left;" />
      <div id="myChart02" style="margin-left: 2%;width:23%;height:300px;float:left;" />
      <div id="myChart03" style="margin-left: 2%;width:23%;height:300px;float:left;" />
      <div id="myChart04" style="margin-left: 2%;width:23%;height:300px;float:left;" />
    </MyMain>
  </MyContainer>
</template>

<script>
import MyContainer from '@/components/Layout/MyContainer.vue'
import MyHeader from '@/components/Layout/MyHeader.vue'
import MyMain from '@/components/Layout/MyMain.vue'
import { CLUSTER_ALL } from '@/utils/constant.js'
import { getDetailTop5 } from '@/api/monitor'
import { getPublicTokenList } from '@/api/cn-mgmt.js'
import { getPrivateAccountList } from '@/api/cn-mgmt'
import * as echarts from 'echarts'
export default {
  name: 'DetailTop5',
  components: {
    MyContainer,
    MyHeader,
    MyMain
  },
  data() {
    return {
      list01: [],
      list02: [],
      list03: [],
      list04: [],
      clusterAll: CLUSTER_ALL,
      PublicCloudAccountName: [],
      PrivateCloudAccountName: [],
      xAxisData1: [],
      yAxisData1: [],
      xAxisData2: [],
      yAxisData2: [],
      yAxisData3: [],
      yAxisData4: [],
      chartname: [],
      options01: [{
        value: '选项1',
        label: '1小时'
      }, {
        value: '选项2',
        label: '1天'
      }, {
        value: '选项3',
        label: '1星期'
      }, {
        value: '选项4',
        label: '1月'
      }],
      value01: '',
      value02: '',
      value03: '1小时'
    }
  },
  created() {
    getPublicTokenList({
      keyword: this.searchKey,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    }).then((data) => {
      this.PublicCloudAccountName = data
      this.value01 = CLUSTER_ALL[0].value
      this.value02 = this.PublicCloudAccountName.data.data[0].cloudAccountName
      this.getList()
    })
    getPrivateAccountList({
      keyword: this.searchKey,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    }).then((data) => {
      this.PrivateCloudAccountName = data
    })
  },
  methods: {
    drawchart01() {
      this.xAxisData1 = []
      this.yAxisData1 = []
      this.yAxisData2 = []
      this.yAxisData3 = []
      this.yAxisData4 = []
      this.yAxisData5 = []
      this.chartname = []
      if (this.list.length == 0) {
        var myChart = echarts.init(document.getElementById('myChart01'))
        myChart.clear()
      }
      else {
        if (this.list[0].items.length > 0) {
          for (const item of this.list[0].items[0].points) {
            this.xAxisData1.push(item.x)
            this.yAxisData1.push(item.y)
          }
        }
        if (this.list[0].items.length > 1) {
          for (const item of this.list[0].items[1].points) {
            this.xAxisData2.push(item.x)
            this.yAxisData2.push(item.y)
          }
        }
        if (this.list[0].items.length > 2) {
          for (const item of this.list[0].items[2].points) {
            this.yAxisData3.push(item.y)
          }
        }
        if (this.list[0].items.length > 3) {
          for (const item of this.list[0].items[3].points) {
            this.yAxisData4.push(item.y)
          }
        }
        if (this.list[0].items.length > 4) {
          for (const item of this.list[0].items[4].points) {
            this.yAxisData5.push(item.y)
          }
        }
        for (const item of this.list[0].items) {
          this.chartname.push(item.name)
        }
        var myChart = echarts.init(document.getElementById('myChart01'))
        myChart.clear()
        myChart.setOption({
          title: {
            // text: this.list.length ? this.list[0].title : ''
            text: 'TOP5-CPU使用率(实时)(%)'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 30,
            data: this.chartname.length ? this.chartname : []
          },
          grid: {
            left: '9%',
            right: '0%',
            bottom: '0%',
            top: '30%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: this.xAxisData1
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: "{value} %",
            },
          },
          series: [
            {
              name: this.list[0].items.length >0 ? this.list[0].items[0].name : '',
              type: 'line',
              data: this.yAxisData1
            },
            {
              name: this.list[0].items.length >1 ? this.list[0].items[1].name : '',
              type: 'line',
              data: this.yAxisData2
            },
            {
              name: this.list[0].items.length >2 ? this.list[0].items[2].name : '',
              type: 'line',
              data: this.yAxisData3
            },
            {
              name: this.list[0].items.length >3 ? this.list[0].items[3].name : '',
              type: 'line',
              data: this.yAxisData4
            },
            {
              name: this.list[0].items.length >4 ? this.list[0].items[4].name : '',
              type: 'line',
              data: this.yAxisData5
            }
          ]
        })
      }
    },
    drawchart02() {
      this.xAxisData1 = []
      this.yAxisData1 = []
      this.yAxisData2 = []
      this.yAxisData3 = []
      this.yAxisData4 = []
      this.yAxisData5 = []
      this.chartname = []
      if (this.list.length == 0) {
        var myChart = echarts.init(document.getElementById('myChart02'))
        myChart.clear()
      }
      else {
        if (this.list[1].items.length > 0) {
          for (const item of this.list[1].items[0].points) {
            this.xAxisData1.push(item.x)
            this.yAxisData1.push(item.y)
          }
        }
        if (this.list[1].items.length > 1) {
          for (const item of this.list[1].items[1].points) {
            this.xAxisData2.push(item.x)
            this.yAxisData2.push(item.y)
          }
        }
        if (this.list[1].items.length > 2) {
          for (const item of this.list[1].items[2].points) {
            this.yAxisData3.push(item.y)
          }
        }
        if (this.list[1].items.length > 3) {
          for (const item of this.list[1].items[3].points) {
            this.yAxisData4.push(item.y)
          }
        }
        if (this.list[1].items.length > 4) {
          for (const item of this.list[1].items[4].points) {
            this.yAxisData5.push(item.y)
          }
        }
        for (const item of this.list[1].items) {
          this.chartname.push(item.name)
        }
        var myChart = echarts.init(document.getElementById('myChart02'))
        myChart.clear()
        myChart.setOption({
          title: {
            // text: this.list.length ? this.list[1].title : ''
            text: 'TOP5-内存使用率(实时)(%)'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 30,
            data: this.chartname.length ? this.chartname : []
          },
          grid: {
            left: '10%',
            right: '0%',
            bottom: '0%',
            top: '30%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: this.xAxisData1
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: "{value} %",
            },
          },
          series: [
            {
              name: this.list[1].items.length >0 ? this.list[1].items[0].name : '',
              type: 'line',
              data: this.yAxisData1
            },
            {
              name: this.list[1].items.length >1 ? this.list[1].items[1].name : '',
              type: 'line',
              data: this.yAxisData2
            },
            {
              name: this.list[1].items.length >2 ? this.list[1].items[2].name : '',
              type: 'line',
              data: this.yAxisData3
            },
            {
              name: this.list[1].items.length >3 ? this.list[1].items[3].name : '',
              type: 'line',
              data: this.yAxisData4
            },
            {
              name: this.list[1].items.length >4 ? this.list[1].items[4].name : '',
              type: 'line',
              data: this.yAxisData5
            }
          ]
        })
      }
    },
    drawchart03() {
      this.xAxisData1 = []
      this.yAxisData1 = []
      this.yAxisData2 = []
      this.yAxisData3 = []
      this.yAxisData4 = []
      this.yAxisData5 = []
      this.chartname = []
      if (this.list.length == 0) {
        var myChart = echarts.init(document.getElementById('myChart03'))
        myChart.clear()
      }
      else {
        if (this.list[2].items.length > 0) {
          for (const item of this.list[2].items[0].points) {
            this.xAxisData1.push(item.x)
            this.yAxisData1.push(item.y)
          }
        }
        if (this.list[2].items.length > 1) {
          for (const item of this.list[2].items[1].points) {
            this.xAxisData2.push(item.x)
            this.yAxisData2.push(item.y)
          }
        }
        if (this.list[2].items.length > 2) {
          for (const item of this.list[2].items[2].points) {
            this.yAxisData3.push(item.y)
          }
        }
        if (this.list[2].items.length > 3) {
          for (const item of this.list[2].items[3].points) {
            this.yAxisData4.push(item.y)
          }
        }
        if (this.list[2].items.length > 4) {
          for (const item of this.list[2].items[4].points) {
            this.yAxisData5.push(item.y)
          }
        }
        for (const item of this.list[2].items) {
          this.chartname.push(item.name)
        }
        var myChart = echarts.init(document.getElementById('myChart03'))
        myChart.clear()
        myChart.setOption({
          title: {
            // text: this.list.length ? this.list[2].title : ''
            text: 'TOP5-网络流入速率(实时)(KB/S)'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 30,
            data: this.chartname.length ? this.chartname : []
          },
          grid: {
            left: '11.5%',
            right: '0%',
            bottom: '0%',
            top: '30%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: this.xAxisData1
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: "{value} Kb/s",
            },
          },
          series: [
            {
              name: this.list[2].items.length >0 ? this.list[2].items[0].name : '',
              type: 'line',
              data: this.yAxisData1
            },
            {
              name: this.list[2].items.length >1 ? this.list[2].items[1].name : '',
              type: 'line',
              data: this.yAxisData2
            },
            {
              name: this.list[2].items.length >2 ? this.list[2].items[2].name : '',
              type: 'line',
              data: this.yAxisData3
            },
            {
              name: this.list[2].items.length >3 ? this.list[2].items[3].name : '',
              type: 'line',
              data: this.yAxisData4
            },
            {
              name: this.list[2].items.length >4 ? this.list[2].items[4].name : '',
              type: 'line',
              data: this.yAxisData5
            }
          ]
        })
      }
    },
    drawchart04() {
      this.xAxisData1 = []
      this.yAxisData1 = []
      this.yAxisData2 = []
      this.yAxisData3 = []
      this.yAxisData4 = []
      this.yAxisData5 = []
      this.chartname = []
      if (this.list.length == 0) {
        var myChart = echarts.init(document.getElementById('myChart04'))
        myChart.clear()
      }
      else {
        if (this.list[3].items.length > 0) {
          for (const item of this.list[3].items[0].points) {
            this.xAxisData1.push(item.x)
            this.yAxisData1.push(item.y)
          }
        }
        if (this.list[3].items.length > 1) {
          for (const item of this.list[3].items[1].points) {
            this.xAxisData2.push(item.x)
            this.yAxisData2.push(item.y)
          }
        }
        if (this.list[3].items.length > 2) {
          for (const item of this.list[3].items[2].points) {
            this.yAxisData3.push(item.y)
          }
        }
        if (this.list[3].items.length > 3) {
          for (const item of this.list[3].items[3].points) {
            this.yAxisData4.push(item.y)
          }
        }
        if (this.list[3].items.length > 4) {
          for (const item of this.list[3].items[4].points) {
            this.yAxisData5.push(item.y)
          }
        }
        for (const item of this.list[3].items) {
          this.chartname.push(item.name)
        }
        var myChart = echarts.init(document.getElementById('myChart04'))
        myChart.clear()
        myChart.setOption({
          title: {
            // text: this.list.length ? this.list[3].title : ''
            text: 'TOP5-网络流出速率(实时)(KB/S)'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 30,
            data: this.chartname.length ? this.chartname : []
          },
          grid: {
            left: '8%',
            right: '0%',
            bottom: '0%',
            top: '30%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: this.xAxisData1
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: "{value} Kb/s",
            },
          },
          series: [
            {
              name: this.list[3].items.length >0 ? this.list[3].items[0].name : '',
              type: 'line',
              data: this.yAxisData1
            },
            {
              name: this.list[3].items.length >1 ? this.list[3].items[1].name : '',
              type: 'line',
              data: this.yAxisData2
            },
            {
              name: this.list[3].items.length >2 ? this.list[3].items[2].name : '',
              type: 'line',
              data: this.yAxisData3
            },
            {
              name: this.list[3].items.length >3 ? this.list[3].items[3].name : '',
              type: 'line',
              data: this.yAxisData4
            },
            {
              name: this.list[3].items.length >4 ? this.list[3].items[4].name : '',
              type: 'line',
              data: this.yAxisData5
            }
          ]
        })
      }
    },
    handleRequest(caller, params) {
      caller(params)
        .then((res) => {
          if (res.data) {
            this.list = Array.isArray(res.data.chartViews) ? res.data.chartViews : []
            if (res.data.listViews.length !== 0) {
              this.list01 = Array.isArray(res.data.listViews[0].items) ? res.data.listViews[0].items : []
              this.list02 = Array.isArray(res.data.listViews[1].items) ? res.data.listViews[1].items : []
              this.list03 = Array.isArray(res.data.listViews[2].items) ? res.data.listViews[2].items : []
              this.list04 = Array.isArray(res.data.listViews[3].items) ? res.data.listViews[3].items : []
            }
            else{
              this.list01 = []
              this.list02 = []
              this.list03 = []
              this.list04 = []
            }
            this.drawchart01()
            this.drawchart02()
            this.drawchart03()
            this.drawchart04()
          } else {
            // 数据为空处理
            this.list = []
          }
          this.extraHandleSuccessResp(res)
        })
        .finally(() => {
          this.loading = false
        })
    },
    getList() {
      this.handleRequest(getDetailTop5, {
        cloudProvider: this.value01,
        cloudAccountName: this.value02,
        interval: this.value03,
        showChart: true,
        topic: 'all'
      })
    },
    CloudAccountNameChanged(){
      if (this.value01 == 'Openstack') {
        this.value02 = this.PrivateCloudAccountName.data.data[0].cloudAccountName
      }
      else if (this.value01 == '阿里云') {
        this.value02 = this.PublicCloudAccountName.data.data[0].cloudAccountName
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.detail-top5-ctn {
}
</style>
